<template>
  <div class="about">
    <h1>This is an about page</h1>
    <div id="dom">{{ msg }}</div>
    <!-- 点击事件 -->
    <button v-on:click="handleClick">click me</button>
    <hr>
    <!-- v-model双向绑定 -->
    <!-- input:输入事件
      blur:失去焦点
      focus:获取焦点
      change:内容更改
     -->
    <input type="text" placeholder="请输入您的姓名" v-model="userName"><br>
    <input type="text" placeholder="请输入您的电话" v-model="userPhone" @focus="handleFocus" 
    @blur="handleBlur"
    @input="handleInput"
    ><br>
    <textarea placeholder="请输入您的建议" cols="30" rows="10" v-model="userInput"></textarea>
    <p>{{ userName }}-----{{ userInput }}</p>
    <button @click="submit">提交</button>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, onBeforeUpdate, onUpdated } from "vue"
export default {
  name: "about",
  setup() {
    const data = reactive({
      msg: "你好！",
      userName: "",
      userInput: "",
      userPhone: ""

    })
    //数据渲染前
    onBeforeMount(() => {
      console.log("onBeforeMount", document.querySelector('#dom'));

    })
    //数据渲染后
    onMounted(() => {
      console.log("onMounted", document.querySelector('#dom'))
      setTimeout(() => {
        data.msg = "hello"
      }, 2000)

    })

    //dom更新前
    onBeforeUpdate(() => {
      console.log("onBeforeUpdate");
    })
    //dom更新后
    onUpdated(() => {
      console.log("onUpdated");
    })

    //声明点击事件函数
    const handleClick = () => {
      alert('傻逼')
    }

    //声明点击事件
    const submit = () => {
      alert(`${data.userName}的建议是${data.userInput}`)

    }

    //声明获取焦点函数
    const handleFocus = () => {
      console.log("获取焦点");

    }
    const handleBlur = () => {
      console.log("失去焦点");
      if(!data.userPhone){
        alert("手机号必填")
      }
    }

    const handleInput=()=>{
      //正则验证手机号
      if(!/^[1][3,4,5,6,7,8][0-9]{9}$/.test(data.userPhone)){
        console.log("请正确输入手机号");
      }
      else{
        console.log("手机号格式输入正确");
      }

    }


    return {
      ...toRefs(data),
      handleClick,
      submit,
      handleFocus,
      handleBlur,
      handleInput
    }
  }
}
</script>
